
import { useState,useRef } from "react"
import home from '../Home.module.less'
import {addResume,updateResumeItem,deleteResumeItem} from '../../../api/index.js'
import {ThreeDotsIcon} from '../../../components/SmallIcon/SmallIcon'
import PopBox from '../../../components/PopBox/PopBox.jsx'

export default function ResumeTitleShow({
    editFlag,
    onTabChange,
    resumeList,
    handleSetResumeList,
    initialActivedId
}){
    const [currentEditId,setCurrentEditId] = useState('')
    const [activedId,setActivedId] = useState(initialActivedId)
    const [currentHoverId,setCurrentHoverId] = useState()
    const currentEditTitle = useRef('')
    const options = [
        {id:1,label:'删除'},
        {id:2,label:'重命名'}, 
        {id:3,label:'拷贝'}, 
    ]

    const handleTabChange = (id)=>{
        if(editFlag && editFlag !==id){
            alert('请先保存数据')
        }else{
            setActivedId(id)
            onTabChange(id)
        }
    }

    // 新增
    const handleAddResume = async ()=>{
        let id = resumeList[resumeList.length - 1]?.id + 1 || 1
        try{
            await addResume(
                {id:id,title:`未命名${id}`,content:{}}
            )
            handleTabChange(id)
            handleSetResumeList('add',{id:id,title:`未命名${id}`,content:{}})
        }catch(err){
            console.log('新增失败----',err)
        }

    }

    // 拷贝
    const copyResume = async (copyId)=>{
        let current = resumeList.find(item=>{
            return item.id ==copyId
        })
        let id = resumeList[resumeList.length - 1]?.id + 1 || 1
        try{
            await addResume(
                {id:id,title:`${current.title}拷贝${id}`,content:{...current.content}}
            )
            handleTabChange(id)
            handleSetResumeList('add',{id:id,title:`${current.title}拷贝${id}`,content:{...current.content}})
        }catch(err){
            console.log('新增失败----',err)
        }
    }
    
    // 编辑
    const handleEditTitle = (id)=>{
        setCurrentEditId(id)
    }

    // 保存
    const handleSaveTitle = async (item)=>{
        console.log('保存',currentEditTitle.current)
        setCurrentEditId('')
        handleSetResumeList('update',{id:item.id,title:currentEditTitle.current})
        // 调用修改接口
        await updateResumeItem({id:item.id,title:currentEditTitle.current,content:item.content})
        currentEditTitle.current = ''
    }

    // 删除
    const handleDeleteResumeItem= async (id)=>{
       handleSetResumeList('delete',{id:id})
       await deleteResumeItem(id)
    }


    // 更多操作
    const handleActivatedOperation = (id)=>{
        if(currentHoverId == id){
            setCurrentHoverId(null)
            return
        }
        setCurrentHoverId(id)
    }

    // 处理 operation弹出框选择
    const handlePopBoxSelect = (operationId,itemId)=>{
        let operation =  options.find(item=>{
            return item.id ==operationId
        })
        switch(operation.label){
            case '删除':
                handleDeleteResumeItem(itemId)
                break;
            case '重命名':
                console.log('重命名---',itemId)
                handleEditTitle(itemId)
                break;
            case '拷贝':
                copyResume(itemId)
                break;
            default:
                break;  
        }
    }



    return (
        <div className={home.resumeTitleShow}>
            {resumeList.length>0 && resumeList?.map(item=>{
                switch(currentEditId){
                    case item.id:
                        return (
                            <div  key={item.id}>
                                <input 
                                    type="text"
                                    onChange={(event)=>{currentEditTitle.current = event.target.value}} 
                                    defaultValue={item.title}
                                />
                                <span onClick={()=>handleSaveTitle(item)} style={{fontSize:'18px',marginLeft:'6px',color:'green'}}>√</span>
                            </div> 
                        )
                    default:
                        return (
                            <div   
                                className={
                                    (currentHoverId==item.id ? home.hoverItem : ' ') + 
                                    ' '  + home.defaultResumeTitle + 
                                    ' ' + (activedId === item.id ? home.activatedItem : '')
                                } 
                                 key={item.id}
                            >
                                <span 
                                    onClick={()=>handleTabChange(item.id)}
                                    style={{
                                        width:'calc(100% - 50px)',
                                        padding:'5px'
                                    }}>
                                    {item.title} 
                                </span>

                                <span className={home.operation} 
                                    onClick={()=>handleActivatedOperation(item.id)}
                                >
                                    <PopBox  
                                        changeSelectId={(id)=>handlePopBoxSelect(id,item.id)}
                                        title={<ThreeDotsIcon/>} 
                                        tabList={currentHoverId==item.id ? options : []}
                                    />
                                </span>
                            </div> 
                        )
                }
            })}
            {/* 模板 */}
            {
                resumeList.length == 0 && <div>请新增模板</div> 
            }
            
            <div onClick={handleAddResume}>新增</div>
        </div>
    )
}